<template>
  <div class="tabbar z-index-max">
    <div class="line"></div>
    <div class="toolbar border-bottom">
      <div class="item" v-for="(item,index) of iconList" :key=index>
        <img class='item-img' :src='[index===selectItemIndex?item.hightlight_img:item.normal_img]' alt="" @click="itemSelectAction(item,index)">
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'Toolbar',
  methods: {
    itemSelectAction (item, selectIndex) {
      // eslint-disable-next-line no-undef
      this.selectItemIndex = selectIndex
      this.$emit('onChangeFragement', item.component_name)
    }
  },
  data () {
    return {
      iconList: [
        {
          hightlight_img: require('@img/tabBarIconHomeHighlighted@2x.png'),
          normal_img: require('@img/tabBarIconHome@2x.png'),
          name: '首页',
          component_name: 'Home'
        },
        {
          hightlight_img: require('@img/tabBarIconDiscoverHighlighted@2x.png'),
          normal_img: require('@img/tabBarIconDiscover@2x.png'),
          name: '分类',
          component_name: 'Discover'
        },
        {
          hightlight_img: require('@img/tabBarIconProfileHighlighted@2x.png'),
          normal_img: require('@img/tabBarIconProfile@2x.png'),
          name: '我的',
          component_name: 'Home'
        }
      ],
      selectItemIndex: 0
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.line
  height 0.9px
  width 100%
  background #f9f9f9
.toolbar
  width 100%
  height 83px
  display flex
  justify-content space-around
  align-items center
  position fixed
  bottom 0
  .item
    align-self center
    height .6rem
    width .6rem
    padding-bottom .4rem
    .item-img
      height 100%
      width 100%
      align-content center
      align-self center
</style>
